<template>
  <div>
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="700px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
        <el-form-item label="任务名称" prop="jobName">
          <el-input v-model="form.jobName" />
        </el-form-item>
        <el-form-item label="任务组名" prop="jobGroup">
          <el-input v-model="form.jobGroup" />
        </el-form-item>
        <el-form-item label="任务方法" prop="methodName">
          <el-input v-model="form.methodName" />
        </el-form-item>
        <el-form-item label="方法参数">
          <el-input v-model="form.methodParams" />
        </el-form-item>
        <el-form-item label="cron表达式" prop="cronExpression">
          <el-row>
            <el-col :span="22"><el-input v-model="form.cronExpression" /></el-col>
            <el-col :span="2"><el-button icon="el-icon-setting" title="打开图形配置" @click="showCronChoose= true" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="错误策略" prop="misfirePolicy">
          <el-select v-model="form.misfirePolicy" filterable placeholder="请选择">
            <el-option v-for="item in dict.dict.type_job_misfire" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="并发执行">
          <el-select v-model="form.concurrent" filterable placeholder="请选择">
            <el-option v-for="item in dict.dict.type_job_concurrent" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="form.status" filterable placeholder="请选择">
            <el-option v-for="item in dict.dict.status_job" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>

    <el-dialog title="选择cron表达式" :visible.sync="showCronChoose" style="width: 100%">
      <v-cron v-if="showCronChoose" v-model="form.cronExpression" />
    </el-dialog>
  </div>
</template>

<script>
import { form } from '@crud/crud'
import VCron from '@/components/Cron'

const defaultForm = { jobId: null, jobName: null, jobGroup: null, methodName: null, methodParams: null, cronExpression: null, misfirePolicy: null, concurrent: null, status: null, optTime: null }
export default {
  components: { VCron },
  mixins: [form(defaultForm)],
  props: {
    dict: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showCronChoose: false,
      rules: {
        jobName: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
        jobGroup: [{ required: true, message: '任务组名不能为空', trigger: 'blur' }],
        methodName: [{ required: true, message: '任务方法不能为空', trigger: 'blur' }],
        cronExpression: [{ required: true, message: 'cron执行表达式不能为空', trigger: 'blur' }],
        misfirePolicy: [{ required: true, message: '计划执行错误策略不能为空', trigger: 'blur' }]
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
</style>
